<template>
<div class="page-wrapper">
  <Breadcrumb v-bind="breads" />
  <div class="container-fluid">
    <div class="row" v-for="(menu, index) in menus" :index="index" :key="menu.permitId">
      <div class="col-12">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">{{menu.name}}</h5>
            <div class="row" v-if="menu.items.length > 0">
              <div class="col-md-6 col-lg-2 col-xlg-3" v-for="item in menu.items" :key="item.permitId">
                <a class="card card-hover" :href="item.path">
                  <div class="box text-center" :class="background()">
                    <h1 class="font-light text-white">
                      <i :class="item.icon"></i>
                    </h1>
                    <h6 class="text-white">{{item.name}}</h6>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Footer />
</div>
</template>
<script>
  import $ from 'jquery'
  import cfg from '../dist/js/config'
  import Footer from './ComFooter'
  import Breadcrumb from './ComBreadcrumb'

  const menus = []
  const bg = [ 'bg-blue', 'bg-indigo', 'bg-purple', 'bg-pink', 'bg-red', 'bg-orange', 'bg-yellow', 'bg-green',
    'bg-teal', 'bg-cyan', 'bg-gray', 'bg-gray-dark',
    'bg-primary', 'bg-secondary', 'bg-success', 'bg-info', 'bg-warning', 'bg-danger', 'bg-dark' ]

  function loadMenus() {
    $.get(cfg.serverPath + '/login/menus', result => {
      if (result.status != 0) {
        $(document).failMsg(result.message)
        return
      }
      this.sortMenus(result.data)
    })
  }
  function sortMenus(menus) {
    for (let i in menus) {
      if (!menus[i].items) {
        menus[i].items = []
      }
      for (let j in menus) {
        if (menus[j].parentId && menus[i].permitId == menus[j].parentId) {
          menus[i].items.push(menus[j])
        }
      }
      if (!menus[i].parentId) {
        this.menus.unshift(menus[i])
      }
    }
    this.menus.sort((a, b) => {
      return a.sort - b.sort
    })
  }
  function background() {
    return bg[parseInt(Math.random() * bg.length - 1)]
  }
  function breads() {
    return {
      title: '欢迎！',
      items: [
        {
          href: '#/',
          name: '主页'
        } ]
    }
  }

  export default {
    components: {
      Footer,
      Breadcrumb
    },
    data() {
      return {
        menus
      }
    },
    computed: {
      breads
    },
    created() {
      if (this.menus.length == 0) {
        this.loadMenus()
      }
    },
    methods: {
      loadMenus,
      sortMenus,
      background
    }
  }
</script>
<style scoped>
.bg-blue {
	background-color: #2255a4 !important;
}

.bg-indigo {
	background-color: #6610f2 !important;
}

.bg-purple {
	background-color: #7460ee !important;
}

.bg-pink {
	background-color: #f74d4d !important;
}

.bg-red {
	background-color: #da542e !important;
}

.bg-orange {
	background-color: #fb8c00 !important;
}

.bg-yellow {
	background-color: #ffb848 !important;
}

.bg-green {
	background-color: #28b779 !important;
}

.bg-teal {
	background-color: #20c997 !important;
}

.bg-cyan {
	background-color: #27a9e3 !important;
}

.bg-white {
	background-color: #fff !important;
}

.bg-gray {
	background-color: #6c757d !important;
}

.bg-gray-dark {
	background-color: #343a40 !important;
}

.bg-primary {
	background-color: #7460ee !important;
}

.bg-secondary {
	background-color: #6c757d !important;
}

.bg-success {
	background-color: #28b779 !important;
}

.bg-info {
	background-color: #2255a4 !important;
}

.bg-warning {
	background-color: #ffb848 !important;
}

.bg-danger {
	background-color: #da542e !important;
}

.bg-light {
	background-color: #f8f9fa !important;
}

.bg-dark {
	background-color: #343a40 !important;
}
</style>